<template>
    <div class="pub-header flexs" :class="{ showSubMenu }">
        <div class="pub-header__left" v-if="routePath !== '/Home'">
            <template v-if="showBread">
                <back-page :content="title"></back-page>
            </template>
            <template v-else>
                {{ title }}
            </template>
        </div>
        <div class="pub-header__left" v-else>
            <h3>{{ title }}</h3>
        </div>
        <!-- 头像 -->
        <div>
            <!-- <el-avatar :size="50" :src="circleUrl" /> -->
            <h5>{{ nickName }}</h5>
        </div>
    </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@stores/user";
import BackPage from "./BackPage.vue";

defineProps({
    showSubMenu: Boolean,
});

const route = useRoute();
const userStore = useUserStore();

const nickName = computed(() => userStore.userinfo?.nickName || "");

const title = computed(() => route.meta.title);
const showBread = computed(() => route.meta.showBread);
const routePath = computed(() => route.path);
</script>

<style lang="less" scoped>
.pub-header {
    position: fixed;
    top: 0;
    right: 0;
    left: @first-menu-width;
    z-index: 10;
    height: @height-mdl;
    background: #fff;
    border-bottom: @border-gray;
    padding: 0px 25px;
    font-size: @font-size-md;

    &.showSubMenu {
        left: calc(@first-menu-width + @sub-menu-width);
    }

    .pub-header__left {
        color: @gray-8;
        cursor: default;

        h3 {
            font-size: 20px;
            color: @gray-8;
            font-weight: bold;
        }
    }
}
</style>
